<template>
	<Card @onCard="onClick">
		<view class="inspection-card-wrapper-head">
			<view span="10" class="left" :style="[inspectionTypeStyle(data)]">
				<span class="level">
					{{data | inspectionType | inspectionTypeText(data.type)}}
				</span>
			</view>
			<view class="center">
				<span class="orderNo">
					{{data.code}}
				</span>
			</view>
			<view span="2" class="right">
				<span class="state" :style="[$inspectionResultTextOrColor(data.lastResult).style]">
					{{$inspectionResultTextOrColor(data.lastResult).text}}
				</span>
			</view>
		</view>
		<view class="inspection-card-wrapper-title">
			<h5>
				{{data.name}}
			</h5>
		</view>
		<view class="inspection-card-wrapper-body">
			<view span="11" class="left">
				<ul class="inspection-info">
					<li class="inspection-info-item">
						<span class="inspection-info-item-label">巡检人</span>
						<span class="inspection-info-item-value">{{data.makeUserToName || '-'}}</span>
					</li>
					<li class="inspection-info-item">
						<span class="inspection-info-item-label">巡检时间</span>
						<span class="inspection-info-item-value"> {{data.executeTime}}</span>
					</li>
					<li class="inspection-info-item">
						<span class="inspection-info-item-label">使用科室</span>
						<span class="inspection-info-item-value">{{data.useDeptToName}}</span>
					</li>
					<li class="inspection-info-item">
						<span class="inspection-info-item-label">运维科室</span>
						<span class="inspection-info-item-value">{{data.maintainDeptToName}}</span>
					</li>
				</ul>
			</view>
			<view span="1" class="right">
				<u-icon name="arrow-right" color="#98A5B3" size="28"></u-icon>
			</view>
		</view>

	</Card>
</template>

<script>
	// 巡检卡片
	function inspectionType(val) {
		if (val.lastResult == 2 && val.lastErrorMake == 1) {
			return 1
		}
		return 0
	}
	import colors from '../../common/color.js'
	import Card from '@/components/card/components/wrapper.vue'
	export default {

		name: 'InspectionCard',
		components: {
			Card
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
			navUrl: {
				type: String,
				default: ''
			}
		},
		filters: {
			inspectionType: inspectionType,
			inspectionTypeText(val, type) {
				if (val === 1) {
					return '限期整改'
				} else {
					if (type == 1) {
						return '计划巡检'
					} else {
						return '临时巡检'
					}
				}


			}
		},

		data() {
			return {}
		},
		methods: {
			inspectionTypeStyle(val) {
				if (inspectionType(val) === 1) {
					return {
						background: colors.yellowBlock,
						color: colors.black,
					}
				}
			},
			onClick() {
				wx.navigateTo({
					url: this.navUrl
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.inspection {
		&-card {
			// background-color: #fff;
			// margin-top: 30rpx;
			// box-shadow: 0 30rpx 18rpx -14rpx #E6EBF2;
			// border-radius: 20rpx;
			// overflow: hidden;

			&-wrapper {
				&-head {
					height: 68rpx;
					line-height: 68rpx;
					border-bottom: 2rpx solid #F5F7FA;
					display: flex;

					>.left {
						width: 20%;
						flex-basis: 20%;
						text-align: center;
						border-right: 2rpx solid #F5F7FA;

						>.level {
							font-weight: 400;
							font-size: 28rpx;
						}
					}

					>.center {
						width: 60%;
						flex-basis: 60%;
						padding-left: 20rpx;

						>.orderNo {
							font-weight: 400;
							font-size: 28rpx;
							color: #98A5B3;
						}
					}

					>.right {
						flex: 1;
						text-align: center;

						>.state {
							font-weight: 600;
							font-size: 28rpx;
						}

					}
				}

				&-title {
					padding-left: 20rpx;
					font-weight: 600;
					font-size: 34rpx;
					color: #0F2E4D;
					margin: 30rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&-body {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					padding-left: 20rpx;

					>.left {
						width: 90%;
						flex-basis: 90%;
					}

					>.right {
						flex: 1;
						align-items: center;
						display: flex;
						justify-content: center;
						padding-bottom: 60rpx;
					}
				}

			}

		}

		&-info {
			&-item {
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;

				&-label {
					font-weight: 400;
					font-size: 28rpx;
					color: #98A5B3;
					width: 120rpx;
					flex-basis: 120rpx;

				}

				&-value {
					font-weight: 400;
					font-size: 28rpx;
					margin-left: 20rpx;
					color: #0F2E4D;
					flex: 1;
				}
			}
		}
	}
</style>
